<template>
  <div class="wrapper">
    <!--header-->
    <div class="search" >
      <i @click="goBack" class="fa fa-angle-left "></i>
      <div class="search-box" @click="toSearch">
        搜索饿了么商家
        <!--<input type="text" v-model="nameToSearch" placeholder="搜索饿了么商家" @input="inputChange">-->
      </div>
      <p>搜索</p>
    </div>
    <!--无结果-->
    <div class="noResult" v-if="this.noResult">
      <p>无搜索结果</p>
    </div>
    <!--商家列表-->
    <ul class="business">
      <li v-for="item in businessArr" @click="toBusinessInfo(item.businessId)" v-if="item">
        <div class="left">
          <img :src="item.businessImg">
          <div class="quantity" v-show="item.quantity>0">{{ item.quantity }}</div>
        </div>
        <div class="right">
          <h3>{{ item.businessName }}</h3>
          <p>&#165;{{ item.startPrice }}起送 | &#165;{{ item.deliveryPrice }}配送</p>
          <p>{{ item.businessExplain }}</p>
        </div>
      </li>
    </ul>
    <!--底部菜单部分-->
    <Footer></Footer>
  </div>
</template>

<script>
import Footer from "@/components/Footer";
import Vue from "vue";

export default {
  name: 'BusinessList',
  data() {
    return {
      nameToSearch:this.$route.query.nameToSearch,
      //businessIdArr:[],
      businessArr: [],
      user: {},
      noResult:false
    }
  },
  created() {
    this.user = this.$getSessionStorage('user');
    //空名字没有搜索结果
    if(this.nameToSearch==''){
      this.noResult = true;
      return
    }
    //搜索商家
    this.SearchBusiness();
  },
  components: {
    Footer
  },
  methods: {
    listCart() {
      let url = `cart/${this.user.userId}`;
      this.$axios.get(url).then(response => {
        let cartArr = response.data.result;
        //遍历所有食品列表
        for (let businessItem of this.businessArr) {
          businessItem.quantity = 0;
          for (let cartItem of cartArr) {
            if (cartItem.business.businessId == businessItem.businessId) {
              businessItem.quantity += cartItem.quantity;
            }
          }
        }
        this.businessArr.sort();
      }).catch(error => {
        console.error(error);
      });
    },
    //跳转到businessInfo页面
    toBusinessInfo(businessId) {
      this.$router.push({path: '/businessInfo', query: {businessId: businessId}});
    },
    //回到search页面
    toSearch(){
      this.$router.push({path:'/search'});
      //回到页面顶部
      window.scrollTo(0,0);
    },
    //返回上一个页面
    goBack(){
      this.$router.go(-1);
    },
    //搜索商家功能
    SearchBusiness() {
      if(this.nameToSearch!=null) {
        //TODO
        this.$axios.get('listBusinessByVagueName', {
          params: {
            nameToSearch: this.nameToSearch
          }
        }).then(response => {
          this.businessArr = response.data;
          //没有搜索结果时
          if(this.businessArr.length==0){
            this.noResult = true;
            return
          }
          //判断是否登录
          if(this.user!=null){
            this.listCart();
          }
        }).catch(error => {
          console.error(error);
        });
      }
    },
  }
}
</script>

<style scoped>
/**************************总容器**************************/
.wrapper {
  width: 100%;
  height: 100%;
}

/**************************search**************************/
.wrapper .search{
  width: 100%;
  height: 17vw;
  background-color: #e4f8fa;

  display: flex;
  align-items: center;
}

.wrapper .search .fa-angle-left{
  flex:0 0 6vw;
  margin-left: 4vw;
  font-size: 6vw;
}

.wrapper .search .search-box{
  flex: 1;
  display: flex;
  align-items: center;
  border: solid 1px #DDD;
  border-radius: 6px;
  padding: 0.3vw;

  width:100%;
  height: 6vw;
  font-size: 3.2vw;
  font-weight: 500;
  font-family: "宋体";
  color: #AEAEAE;
  background-color: #fff;
}

.wrapper .search  p{
  flex:0 0 13vw;
  font-size: 4vw;
  font-weight: 600;
  color: #635a5a;
  font-family: "微软雅黑";

  margin-left: 5vw;
}

/**************************商家列表**************************/
.wrapper .business {
  width: 100%;
}

.wrapper .business li {
  width: 100%;
  box-sizing: border-box;
  padding: 2.5vw;
  border-bottom: solid 1px #DDDDDD;
  user-select: none;

  display: flex;
  align-items: center;
}

.wrapper .business .left {
  position: relative
}

.wrapper .business .left img {
  width: 20vw;
  height: 20vw;
}

.wrapper .business .left .quantity {
  width: 5vw;
  height: 5vw;
  background-color: red;
  color: #fff;
  font-size: 3.6vw;
  border-radius: 2.5vw;

  display: flex;
  justify-content: center;
  align-items: center;

  position: absolute;
  right: -1.5vw;
  top: -1.5vw;
}

.wrapper .business .right {
  margin-left: 3vw;
}

.wrapper .business h3 {
  font-size: 3.8vw;
  color: #555;
}

.wrapper .business p {
  font-size: 3vw;
  color: #888;
  margin-top: 2vw;
}

.wrapper .noResult{
  width:100%;
  height: 40vw;

  display: flex;
  align-items: center;
  justify-content: center;
}

.wrapper .noResult p{
  font-size: 5vw;
  font-weight: 700;
}
</style>